<template>
  <div class="bj">
    <el-card class="box-card">
      <el-row type="flex" class="row-bg" justify="end">
        <el-button type="primary" plain @click="$refs['addcaidan'].xianshi()">创建菜单</el-button>
      </el-row>
      <br>
      <template>
        <el-table :data="tableData" border style="width: 100%" row-key="id">
          <el-table-column prop="permission_name" label="菜单名称" width="200" />
          <el-table-column prop="route" label="菜单地址" width="200" />
          <el-table-column prop="permission_mark" label="权限标识" width="200" />
          <el-table-column label="图标" width="80">
            <template slot-scope="{row}">
              <svg-icon :icon-class="row.icon" />
            </template>
          </el-table-column>
          <el-table-column prop="component" label="路径组件" width="200" />
          <el-table-column label="是否显示" width="200">
            <!-- <template slot-scope="{row}"> -->
            <template slot-scope="{row}">
              <el-switch
                v-model="row.hidden"
                :active-value="1"
                :inactive-value="2"
                @click.native="isShowMenu(row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="200" />
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-button type="primary" icon="el-icon-edit" circle @click="$refs['addcaidan'].huoquyhxx(row.id)" />
              <el-button type="warning" icon="el-icon-plus" :disabled="row.type===2" circle @click="$refs['addziys'].huoquyhxx(row.id)" />
              <el-button type="danger" icon="el-icon-delete" circle @click="belete(row.id)" />
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>

    <addcaidan ref="addcaidan" @update-list="getInfo" />
    <addziys ref="addziys" @update-list="getInfo" />
  </div>
</template>
<script>
import { getInfolist } from '@/api/user'
import { deletecaid, xianshi } from '@/api/menu'
import Addcaidan from './components/addcaidan.vue'
import Addziys from './components/addziys.vue'
export default {
  name: 'Menu',
  components: { Addcaidan, Addziys },
  props: {},

  data() {
    return {
      tableData: [],
      value: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getInfo()
  },
  mounted() {},
  methods: {
    // 获得页面信息
    async getInfo() {
      const res = await getInfolist()
      // console.log(res.data)
      this.tableData = res.data
    },
    // 删除
    async belete(id) {
      await this.$confirm('确定删除吗？')
      await deletecaid(id)
      this.$message.success('删除成功')
      this.getInfo()
    },
    // 点击滑块，显示状态
    async isShowMenu(row) {
      await xianshi(row.id, row.hidden)
      this.$message.success('操作成功')
      this.getInfo()
    }
  }
}
</script>
<style  lang='scss' scoped>
.bj{
  border: 1px solid #eaedf1;
  background-color: #eaedf1;
  width: 100%;
  // height: 100vh;
}

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 98%;
    margin-top: 10px;
    margin-left: 1%;
  }
</style>
